<template>
  <div class="search">
    <el-card>
      <el-form :inline="true" label-width="100px" :model="searchForm" ref="formRef">
        <!-- el-element中不需要使用多个el-row进行换行，当el-row中的el-col在一行显示不下时，会自动换行 -->
        <el-row :gutter="30">
          <el-col :lg="8" :md="8" :sm="12">
            <el-form-item label="部门名称" prop="name">
              <el-input v-model="searchForm.name" placeholder="请输入部门名称" />
            </el-form-item>
          </el-col>

          <el-col :lg="8" :md="8" :sm="12">
            <el-form-item label="部门领导" prop="leader">
              <el-input v-model="searchForm.leader" placeholder="请输入部门领导" />
            </el-form-item>
          </el-col>

          <el-col :lg="8" :md="8" :sm="12">
            <el-form-item label="创建时间" prop="createAt">
              <el-date-picker
                v-model="searchForm.createAt"
                type="daterange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row justify="end">
          <el-button icon="Refresh" @click="handleResetClick">重置</el-button>
          <el-button type="primary" icon="Search" @click="handleQueryClick">搜索</el-button>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
  import type { FormInstance } from 'element-plus'
  import { reactive, ref } from 'vue'

  const formRef = ref<FormInstance>()
  const searchForm = reactive<any>({
    name: '',
    leader: '',
    createAt: ''
  })

  const $emits = defineEmits(['queryClick', 'resetClick'])

  // 重置
  function handleResetClick() {
    // 使用resetFields，必须指定每一个el-form-item中prop属性
    formRef.value?.resetFields()
    $emits('resetClick', searchForm)
  }
  // 查询
  function handleQueryClick() {
    $emits('queryClick', searchForm)
  }
</script>

<style lang="scss" scoped>
  .search {
    .el-form-item {
      width: 100%;
    }
  }
</style>

<style lang="scss"></style>
